import { Card, Space } from 'antd';
import React from 'react';
import Link from 'components/ZLink'

export default () => {
    const [equation, setEquation] = React.useState(0)
    React.useEffect(() => {
        let timerId: any = null
        let start = Date.now()
        function interval() {
            const now = Date.now()
            const equation = now - start
            start = now
            setEquation(equation)
            timerId = setTimeout(interval, 100)
        }
        timerId = setTimeout(interval, 100)
        return () => {
            clearTimeout(timerId)
        }
    }, [])

    
    return (
        <Space direction="vertical" style={{ width: '100%' }}>
            <Card
                title="相关链接"
            >
                <Link href="https://segmentfault.com/a/1190000038829248" label="为什么用 setTimeout 模拟 setInterval ？"></Link>
            </Card>
            <Card
                title="注意事项"
            >
                <p>setInterval的缺点</p>
                <p>1.使用setInterval时，某些定时任务会被跳过</p>
                <p>2.可能多个定时器会连续执行</p>
            </Card>
            <div>自定义定时器间隔{equation}</div>
        </Space>
    )
}